<!--<template>-->
<!--  <div class="mod-home">-->
<!--    <p>一个基于spring boot、spring oauth2.0、mybatis、redis的轻量级、前后端分离、拥有完整sku和下单流程的完全开源商城</p>-->
<!--    <p>&nbsp;</p>-->
<!--    <p>该项目仅供学习参考、可供个人学习使用、如需商用联系作者进行授权，否则必将追究法律责任</p>-->
<!--    <p>&nbsp;</p>-->
<!--    <h2>前言</h2>-->
<!--    <p>-->
<!--      <code>mall4j商城</code>项目致力于为中小企业打造一个完整、易于维护的开源的电商系统，采用现阶段流行技术实现。后台管理系统包含商品管理、订单管理、运费模板、规格管理、会员管理、运营管理、内容管理、统计报表、权限管理、设置等模块。-->
<!--    </p>-->
<!--    <p>&nbsp;</p>-->
<!--    <h2>技术选型</h2>-->
<!--    <figure>-->
<!--      <table-->
<!--        border="1"-->
<!--        cellspacing="0"-->
<!--        cellpadding="5px"-->
<!--      >-->
<!--        <thead>-->
<!--          <tr>-->
<!--            <th>技术</th>-->
<!--            <th>版本</th>-->
<!--            <th>说明</th>-->
<!--          </tr>-->
<!--        </thead>-->
<!--        <tbody>-->
<!--          <tr>-->
<!--            <td>Spring Boot</td>-->
<!--            <td>3.0.4</td>-->
<!--            <td>MVC核心框架</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td>MyBatis</td>-->
<!--            <td>3.5.0</td>-->
<!--            <td>ORM框架</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td>MyBatisPlus</td>-->
<!--            <td>3.5.3.1</td>-->
<!--            <td>基于mybatis，使用lambda表达式的</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td>Swagger-UI</td>-->
<!--            <td>4.0.0</td>-->
<!--            <td>文档生产工具</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td>redisson</td>-->
<!--            <td>3.19.3</td>-->
<!--            <td>对redis进行封装、集成分布式锁等</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td>hikari</td>-->
<!--            <td>3.2.0</td>-->
<!--            <td>数据库连接池</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td>log4j2</td>-->
<!--            <td>2.17.2</td>-->
<!--            <td>更快的log日志工具</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td>lombok</td>-->
<!--            <td>1.18.8</td>-->
<!--            <td>简化对象封装工具</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td>hutool</td>-->
<!--            <td>5.8.15</td>-->
<!--            <td>更适合国人的java工具集</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td>xxl-job</td>-->
<!--            <td>2.3.1</td>-->
<!--            <td>定时任务</td>-->
<!--          </tr>-->
<!--        </tbody>-->
<!--      </table>-->
<!--    </figure>-->
<!--    <p>&nbsp;</p>-->
<!--    <h2>部署教程</h2>-->
<!--    <p>&nbsp;</p>-->
<!--    <h3>1.开发环境</h3>-->
<!--    <figure>-->
<!--      <table-->
<!--        border="1"-->
<!--        cellspacing="0"-->
<!--        cellpadding="5px"-->
<!--      >-->
<!--        <thead>-->
<!--          <tr>-->
<!--            <th>工具</th>-->
<!--            <th>版本</th>-->
<!--          </tr>-->
<!--        </thead>-->
<!--        <tbody>-->
<!--          <tr>-->
<!--            <td>jdk</td>-->
<!--            <td>17</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td>mysql</td>-->
<!--            <td>5.7+</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td>redis</td>-->
<!--            <td>3.2+</td>-->
<!--          </tr>-->
<!--        </tbody>-->
<!--      </table>-->
<!--    </figure>-->
<!--    <h3>2.启动</h3>-->
<!--    <ul>-->
<!--      <li>推荐使用idea，安装lombok插件，使用idea导入maven项目</li>-->
<!--      <li>-->
<!--        将shop.sql导入到mysql中，修改-->
<!--        <code>application-dev.yml</code>更改 datasource.url、user、password-->
<!--      </li>-->
<!--      <li>启动redis</li>-->
<!--      <li>-->
<!--        通过-->
<!--        <code>WebApplication</code>启动项目后台接口，-->
<!--        <code>ApiApplication</code> 启动项目前端接口-->
<!--      </li>-->
<!--    </ul>-->
<!--    <p>&nbsp;</p>-->
<!--  </div>-->
<!--</template>-->

<!--<style lang="scss" scoped>-->
<!--.mod-home {-->
<!--  line-height: 1.5;-->
<!--}-->
<!--</style>-->
<template>
  <div class="home-container">
    <section class="stats">
      <div class="stat-card">
        <h2>总订单数</h2>
        <p>{{ totalData.orderCount }}</p>
      </div>
      <div class="stat-card">
        <h2>总产品数</h2>
        <p>{{ totalData.prodCount }}</p>
      </div>
      <div class="stat-card">
        <h2>总用户数</h2>
        <p>{{ totalData.userCount }}</p>
      </div>
      <div class="stat-card">
        <h2>今日销售额</h2>
        <p>￥{{ totalData.todayContent }}</p>
      </div>
    </section>

    <section class="chart-section">
      <h2>年销售趋势</h2>
      <div v-if="salesVolumeValueDate.length > 0 ">
        <EChartComponent
          :chart-data="
            {
              title: {
                text: ''
              },
              tooltip: {},
              xAxis: {
                data: salesVolumeXDate
              },
              gird: {
                left: 0
              },
              yAxis: {},
              series: [{
                name: '销售量',
                type: 'line',
                data: salesVolumeValueDate
              }]
            }"
        />
      </div>

      <!--      <Line-->
      <!--        :chart-data="chartData"-->
      <!--        :chart-options="{-->
      <!--          responsive: true,-->
      <!--          maintainAspectRatio: false-->
      <!--        }"-->
      <!--      />-->
    </section>

    <!--    <section class="product-list">-->
    <!--      <h2>热销产品</h2>-->
    <!--      <div class="products">-->
    <!--        <div-->
    <!--          v-for="product in products"-->
    <!--          :key="product.id"-->
    <!--          class="product-card"-->
    <!--        >-->
    <!--          <img-->
    <!--            :src="product.image"-->
    <!--            alt="Product Image"-->
    <!--          >-->
    <!--          <h3>{{ product.name }}</h3>-->
    <!--          <p>￥{{ product.price }}</p>-->
    <!--          <button @click="addToCart(product)">-->
    <!--            加入购物车-->
    <!--          </button>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </section>-->
  </div>
</template>

<script setup>
import { ref } from 'vue'
// import { Line } from 'vue-chartjs'
// import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, PointElement, LinearScale } from 'chart.js'
//
// ChartJS.register(Title, Tooltip, Legend, LineElement, PointElement, LinearScale)
import EChartComponent from './echarts.vue'
const products = ref([
  { id: 1, name: '产品 A', price: 199, image: 'https://via.placeholder.com/150' },
  { id: 2, name: '产品 B', price: 299, image: 'https://via.placeholder.com/150' },
  { id: 3, name: '产品 C', price: 399, image: 'https://via.placeholder.com/150' },
  { id: 4, name: '产品 D', price: 499, image: 'https://via.placeholder.com/150' }
])
const totalData = ref({
  userCount: 0,
  totalContent: 0,
  todayContent: 0,
  prodCount: 0,
  orderCount: 0
})
const salesVolumeXDate = ref([])
const salesVolumeValueDate = ref([])
const chartOptions = ref()

const addToCart = (product) => {
  // 处理加入购物车逻辑
  console.log(`${product.name} 已加入购物车`)
}
onMounted(async () => {
  getInfo()
})

const getInfo = () => {
  //
  http({
    url: http.adornUrl('/admin/index/info'),
    method: 'get'
  }).then(({ data }) => {
    console.log(data)
    salesVolumeXDate.value = data.salesVolumeXDate
    salesVolumeValueDate.value = data.salesVolumeValueDate
    totalData.value = { ...data }
  })
}

</script>

<style scoped>
.home-container {
  padding: 20px;
  background-color: #f4f4f4;
}

.header {
  margin-bottom: 20px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.stat-card h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.stat-card p {
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
}

.chart-section {
  margin-bottom: 30px;
}

.product-list {
  margin-top: 20px;
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.product-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.product-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

.product-card h3 {
  font-size: 16px;
  margin-bottom: 5px;
}

.product-card p {
  font-size: 18px;
  color: #333;
}

.product-card button {
  background-color: #1aad19;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
  transition: background 0.3s;
}

.product-card button:hover {
  background-color: #16a514;
}
</style>
